import React,{useState} from 'react';
import {Card,Input,Button,Spin,message} from 'antd'
import {UserOutlined,KeyOutlined} from '@ant-design/icons'
// import { BrowserRouter as Router } from 'react-router-dom';
import '../static/css/Login.css'
import { useNavigate } from "react-router-dom";

import axios from 'axios'
import servicePath from '../config/apiUrl';

function Login(props){
    let navigate = useNavigate();
    const [userName,setUserName] = useState('')
    const [password,setPassword] = useState('')
    const [isLoading,setIsLoading] = useState(false)

    const checkLogin =()=>{
        setIsLoading(true)
        if(!userName){
            message.error('用户名不能为空')
            setTimeout(()=>{
                setIsLoading(false)
            },500)
            return false
        }else if(!password){
            message.error('密码不能为空')
            setTimeout(()=>{
                setIsLoading(false)
            },500)
            return false
        }
        let dataProps = {'userName':userName,'password':password}
        axios({
            method:'post',
            // header:{ 'Access-Control-Allow-Origin':'*' },
            url:servicePath.checkLogin,
            data:dataProps,
            withCredentials:true
        }).then(res=>{
            setIsLoading(false)
            if (res.data.data === '登录成功') {
                localStorage.setItem('openId',res.data.openId)
                navigate('/index/index')
            }else{
                message.error('用户名密码错误')
                setTimeout(()=>{
                    setIsLoading(false)
                },500)
            }
        })

    }
    return(
        <div className='login-div'>
            <Spin tip="Loging..." spinning={isLoading}>
                <Card title="JSPang blog System" bordered={true} style={{width:400}}>
                    <Input onChange={(e)=>{setUserName(e.target.value)}} id='username' type="text" size='large' placeholder='enter your username' prefix={<UserOutlined style={{color:'rgba(0,0,0,.25)'}} />}  />
                    <br />
                    <br />
                    <Input.Password onChange={(e)=>{setPassword(e.target.value)}} id='password' type="text" size='large' placeholder='enter your password' prefix={<KeyOutlined style={{color:'rgba(0,0,0,.25)'}} />}  />
                    <br />
                    <br />
                    <Button type='primary' size='large' block onClick={checkLogin}>Login in</Button>
                </Card>
            </Spin>
        </div>

    )
}


export default Login;